<!-- Shaidan.vue -->
<template>
  <div class="evaluation-container">
    <div class="container">
      <!-- 左侧导航菜单 -->
      <div class="sidebar">
        <div class="menu-section">
          <h3>订单中心</h3>
          <ul>
            <li><a href="#/order">我的订单</a></li>
            <li class="active"><a href="#">评价晒单</a></li>
            <li><a href="#">话费充值订单</a></li>
            <li><a href="#">以旧换新订单</a></li>
          </ul>
        </div>

        <div class="menu-section">
          <h3>个人中心</h3>
          <ul>
            <li><a href="#/portal">我的个人中心</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">购买资格</a></li>
            <li><a href="#">现金账户</a></li>
            <li><a href="#">小米礼品卡</a></li>
            <li><a href="#">现金券</a></li>
            <li><a href="#">喜欢的商品</a></li>
            <li><a href="#">优惠券</a></li>
            <li><a href="#">收货地址</a></li>
            <li><a href="#">红包</a></li>
          </ul>
        </div>

        <div class="menu-section">
          <h3>售后服务</h3>
          <ul>
            <li><a href="#">服务记录</a></li>
            <li><a href="#">申请服务</a></li>
            <li><a href="#">领取快递报销</a></li>
          </ul>
        </div>

        <div class="menu-section">
          <h3>账户管理</h3>
          <ul>
            <li><a href="#/zhanghao">个人信息</a></li>
            <li><a href="#/zhanghao">修改密码</a></li>
            <li><a href="#">注销服务</a></li>
          </ul>
        </div>
      </div>

      <!-- 右侧评价内容区域 -->
      <div class="evaluation-content">
        <div class="evaluation-card">
          <h2 class="product-title">{{ goods.gname }}</h2>

          <!-- 服务评价部分 -->
          <div class="evaluation-section">
            <h3>服务评价</h3>
            <div class="rating-item">
              <span>物流包装</span>
              <div class="star-rating">
                <span v-for="i in 5" :key="'package-' + i" @click="setRating('package', i)"
                  :class="{ 'active': ratings.package >= i }">★</span>
              </div>
            </div>
            <div class="rating-item">
              <span>物流速度</span>
              <div class="star-rating">
                <span v-for="i in 5" :key="'speed-' + i" @click="setRating('speed', i)"
                  :class="{ 'active': ratings.speed >= i }">★</span>
              </div>
            </div>
            <div class="rating-item">
              <span>客服服务</span>
              <div class="star-rating">
                <span v-for="i in 5" :key="'service-' + i" @click="setRating('service', i)"
                  :class="{ 'active': ratings.service >= i }">★</span>
              </div>
            </div>
          </div>

          <!-- 商品评价部分 -->
          <div class="evaluation-section">
            <h3>商品评价</h3>
            <div class="rating-item">
              <span>商品评分</span>
              <div class="star-rating">
                <span v-for="i in 5" :key="'product-' + i" @click="setRating('product', i)"
                  :class="{ 'active': ratings.product >= i }">★</span>
              </div>
              <span class="rating-tag" v-if="ratings.product >= 4">超爱</span>
            </div>

            <div class="comment-box">
              <p class="prompt-text">外形如何？品质如何？写写您的感受分享给网友吧！</p>
              <textarea v-model="comment" maxlength="500" placeholder="还有想说的吗？您的意见对我们非常重要"></textarea>
              <div class="word-count">{{ comment.length }}/500</div>

              <!-- 上传区域 -->
              <div class="upload-section">
                <p class="upload-tip">为保障您的个人隐私，请将带有个人信息的数据打码上传，否则可能会影响您的评价展示哟~</p>
                <div class="upload-area">
              <input
                type="file"
                id="avatar-upload"
                @change="change"
                class="file-input"
                multiple accept="image/*"
              />
              <label for="avatar-upload" class="upload-label">
                <span v-if="!files">上传图片</span>
                <span v-else>已选择文件: {{ files.name }}</span>
              </label>
            </div>
              </div>
            </div>
          </div>

          <div class="evaluation-footer">
            <label class="anonymous-check">
              <input type="checkbox" v-model="isAnonymous"> 匿名评价
            </label>
            <button class="submit-btn" @click="submitEvaluation" :disabled="isSubmitting">
              {{ isSubmitting ? '提交中...' : '发表评价' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from '../api/axios'
import { useRoute, useRouter } from 'vue-router'

const files = ref()
const route = useRoute()
const router = useRouter()
const goods = ref({})
const isSubmitting = ref(false)


// 获取商品详情
if(route.query.gid){
  axios.post('/api/goods/goodsByid', { gid: route.query.gid }).then((res) => {
    if (res.data.code === 200) {
      goods.value = res.data.goods
}else{
      alert(res.data.msg)
}
  })
}else{
  alert('商品不存在')
  router.push('/')
}


const ratings = ref({
  package: 0,
  speed: 0,
  service: 0,
  product: 0
})

const comment = ref('')
const isAnonymous = ref(false)

const setRating = (type, score) => {
    ratings.value[type] = score
  }

const change = (event) => {
  files.value = Array.from(event.target.files);
  console.log(files.value)
}

const submitEvaluation=()=>{
  isSubmitting.value = true
  const formData = new FormData()
  formData.append('gid', goods.value.gid)
  formData.append('userid', JSON.parse(sessionStorage.getItem('user')).userid)
  formData.append('package', ratings.value.package)
  formData.append('speed', ratings.value.speed)
  formData.append('service', ratings.value.service)
  formData.append('product', ratings.value.product)
  formData.append('contents', comment.value)
  formData.append('isAnonymous', isAnonymous.value)
  files.value.forEach(file => {
    formData.append('images', file)
  })
  axios.post('/api/reviews/addReview', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((res) => {
    if (res.data.code === 200) {
      alert('评价成功')
      router.push('/order')
    } else {
      alert(res.data.msg)
    }
    isSubmitting.value = false
  })
}



</script>

<style scoped>
.evaluation-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px 0;
}

.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar {
  width: 220px;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}

.menu-section {
  margin-bottom: 30px;
}

.menu-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  padding-left: 10px;
  font-weight: normal;
}

.menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-section li {
  margin-bottom: 5px;
}

.menu-section li a {
  display: block;
  padding: 10px;
  color: #666;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.menu-section li a:hover {
  background-color: #f5f5f5;
  color: #ff6700;
}

.menu-section li.active a {
  background-color: #ff6700;
  color: white;
}

.evaluation-content {
  flex: 1;
  padding: 20px;
}

.evaluation-card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.product-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.evaluation-section {
  margin-bottom: 30px;
}

.evaluation-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: normal;
}

.rating-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.rating-item span:first-child {
  width: 80px;
  color: #666;
  font-size: 14px;
}

.star-rating {
  display: inline-flex;
  margin-right: 10px;
}

.star-rating span {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  margin-right: 5px;
  transition: color 0.2s;
}

.star-rating span:hover,
.star-rating span.active {
  color: #ff6700;
}

.rating-tag {
  color: #ff6700;
  font-size: 14px;
  margin-left: 10px;
  font-weight: bold;
}

.comment-box {
  margin-top: 20px;
}

.prompt-text {
  color: #999;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.comment-box textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  resize: none;
  font-size: 14px;
  transition: border-color 0.3s;
}

.comment-box textarea:focus {
  border-color: #ff6700;
  outline: none;
}

.word-count {
  text-align: right;
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}

.upload-section {
  margin-top: 20px;
}

.upload-tip {
  color: #ff6700;
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.upload-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 80px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-area:hover {
  border-color: #ff6700;
}

.upload-area>span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: #999;
  font-size: 14px;
  border: 1px dashed #e0e0e0;
  border-radius: 4px;
  transition: all 0.3s;
}

.upload-area>span:hover {
  border-color: #ff6700;
  color: #ff6700;
}

.image-preview {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #ff6700;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.delete-btn:hover {
  background: #f25807;
}

.evaluation-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.anonymous-check {
  display: flex;
  align-items: center;
  margin-right: 20px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.anonymous-check input {
  margin-right: 5px;
  cursor: pointer;
}

.submit-btn {
  padding: 8px 30px;
  background: #ff6700;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.submit-btn:hover:not(:disabled) {
  background: #f25807;
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>
